<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通讯录列表</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- MUI -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

    <!-- 下拉刷新和上拉加载插件 -->
    <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/index.css" />
</head>
<style>
    .contact .box {
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    .contact .call {
        margin-bottom: 1.5rem;
        margin-right: 1.8rem;
    }

    .operation {
        display: flex;
    }

    .operation button {
        margin: 0 0.3rem;
    }
</style>

<body>
    <!-- 搜索 -->
    <div class="search">
        <div class="box">
            <div class="icon">
                <span class="glyphicon glyphicon-search"></span>
            </div>

            <input class="input" placeholder="请输入关键字" id="keywords" />

            <button class="btn keywords" size="mini" type="default">搜索</button>
        </div>
    </div>
    <!-- 分类 -->
    <div class="type wow fadeInUp">
        <div class="list" id="type">
            <div class="item active" data-typeid="0">全部</div>
        </div>
    </div>

    <!-- 列表 -->
    <div class="contact wow fadeInUp" data-wow-delay="100ms" id="Concat">
        <div class="list" id="contactList">
        </div>
    </div>
    <!-- 底部 -->
    <div class="tabbar">
        <div class="box">
            <a href="index.html" class="item">
                <span class="icon glyphicon glyphicon-home"></span>
                <span class="name">首页</span>
            </a>
            <a href="contactAdd.html" class="item">
                <span class="icon glyphicon glyphicon-list-alt"></span>
                <span class="name">新建</span>
            </a>
            <a href="my.html" class="item">
                <span class="icon glyphicon glyphicon-user"></span>
                <span class="name">我的</span>
            </a>
        </div>
    </div>
</body>

</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- MUI -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- axios请求 -->
<script src="./assets/plugins/axios/axios.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- 下拉刷新和上拉加载插件 -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<!-- cookie -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 校验用户是否登陆 -->
<script src="./assets/plugins/helper.js"></script>

<script>
    //实例化wow.js
    new WOW().init();

    let Business = cookie.get('Business') ? JSON.parse(cookie.get('Business')) : "{}";
    // console.log(Business);

    // 获取下拉分类列表
    (async function () {
        let result = await POST({ url: 'card/card/type' })
        if (result.code == 1) {
            result.data.forEach((item) => {
                let str = `
                     <div class="item" data-typeid="${item.id}">${item.name}</div>
                `
                $("#type").append(str)
            })
        }
    })();


    let page = 1;
    let limit = 5;

    //第一个参数"mescroll"对应上面布局结构div的id
    var mescroll = new MeScroll("Concat", {
        down: {
            //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
            callback: downCallback
        },
        up: {
            //上拉加载的回调
            callback: upCallback,
            //以下是一些常用的配置,当然不写也可以的.
            page: {
                //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                num: 0,
                //每页数据条数,默认10
                size: limit
            }
        }
    });

    function downCallback() {
        mescroll.resetUpScroll();
        $("#contactList").html('')
    }
    $(".keywords").click(function () {
        downCallback()
    })
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            downCallback()
        }
    })

    // 上拉调用方法
    async function upCallback(pages) {
        page = pages.num
        limit = pages.size
        let result = await POST({
            url: 'card/card/index', params: {
                page: page,
                limit: limit,
                businessid: Business.id,
                search: $("#keywords").val()
            }
        })
        console.log(result.data.list);
        if (result.code == 0) {
            mui.toast(result.msg);
            return false;
        }
        // console.log(result);
        let count = result.data.count;
        let data = result.data.list
        mescroll.endBySize(data.length, count);
        renderingEvent(data);
    }

    // 点击不同分类展示通讯录列表
    $(document).on('click', "#type .item", function () {
        let type_id = $(this).data('typeid');
        page = 1;

        // 请求数据
        (async function () {
            let result = await POST({
                url: 'card/card/index', params: {
                    page: page,
                    limit: limit,
                    businessid: Business.id,
                    search: $("#keywords").val()
                }
            })
            // console.log(result.data.list);
            if (result.code == 0) {
                mui.toast(result.msg);
                return false;
            }

            // 点击分类展示列表
            // console.log(type_id);
            $("#contactList").html('')
            result.data.list.forEach((item) => {
                if (item.typeid == type_id) {
                    console.log(item.typeid);
                    let str = `
                            <div class="item">
                                <div class="content">
                                    <h3 class="title">
                                        <a href="ContactAdd.html">${item.nickname}</a>
                                    </h3>

                                    <div class="info">
                                        <div class="icon">
                                            <image src="./assets/images/info.png"></image>
                                        </div>
                                        <div class="desc">
                                            ${item.remark}
                                        </div>
                                    </div>
                                </div>
                                <div class="box">
                                    <div class="call icon">
                                        <a id="callbtn"><image src="./assets/images/call.png"></image></a>
                                    </div>
                                    <div class="operation">
                                        <button type="button" class="mui-btn mui-btn-primary" onclick="edit(${item.id})">编辑</button>
                                        <button type="button" class="mui-btn mui-btn-danger" onclick="dele(${item.id}, '${item.nickname}')">删除</button>
                                    </div>
                                </div>
                            </div>
                            `
                    $("#contactList").append(str)
                } else if (type_id == 0) {
                    let str = `
            <div class="item">
                <div class="content">
                    <h3 class="title">
                        <a href="ContactAdd.html">${item.nickname}</a>
                    </h3>

                    <div class="info">
                        <div class="icon">
                            <image src="./assets/images/info.png"></image>
                        </div>
                        <div class="desc">
                            ${item.remark}
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="call icon">
                        <a id="callbtn"><image src="./assets/images/call.png"></image></a>
                    </div>
                    <div class="operation">
                        <button type="button" class="mui-btn mui-btn-primary" onclick="edit(${item.id})">编辑</button>
                        <button type="button" class="mui-btn mui-btn-danger" onclick="dele(${item.id}, '${item.nickname}')">删除</button>
                    </div>
                </div>
            </div>
            `
                    $("#contactList").append(str)
                }
            });

        })();
    }
    )


    function renderingEvent(data) {
        data.forEach((item) => {
            // console.log(item);
            let str = `
            <div class="item">
                <div class="content">
                    <h3 class="title">
                        <a href="ContactAdd.html">${item.nickname}</a>
                    </h3>

                    <div class="info">
                        <div class="icon">
                            <image src="./assets/images/info.png"></image>
                        </div>
                        <div class="desc">
                            ${item.remark}
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="call icon">
                        <a id="callbtn"><image src="./assets/images/call.png"></image></a>
                    </div>
                    <div class="operation">
                        <button type="button" class="mui-btn mui-btn-primary" onclick="edit(${item.id})">编辑</button>
                        <button type="button" class="mui-btn mui-btn-danger" onclick="dele(${item.id}, '${item.nickname}')">删除</button>
                    </div>
                </div>
            </div>
            `
            $("#contactList").append(str)
        })
    }

    // 编辑 跳转编辑页面
    function edit(id) {
        location.href = `concatEdit.html?cardid=${id}`
    }

    // 删除
    function dele(id, nickname) {
        // console.log(id,nickname);
        mui.confirm(`确认删除${nickname}?`, '删除', ['确定', '取消'], async function (e) {
            // e.index按钮索引，确定0 取消1
            if (e.index == 0) {
                let res = await POST({
                    url: 'card/card/del',
                    params: {
                        businessid: Business.id,
                        cardid: id
                    }
                })
                if (res.code == 1) {
                    mui.toast(res.msg);
                    downCallback();
                } else {
                    mui.toast(res.msg);
                }

            }
        })
    }


    // 拨打电话
    $(document).on('click', "#callbtn", function (e) {
        e.preventDefault();
        let index = $(this).closest('.item').index();
        (async function () {
            let result = await POST({
                url: 'card/card/index', params: {
                    page: page,
                    limit: limit,
                    businessid: Business.id,
                    search: $("#keywords").val()
                }
            })
            // console.log(result.data.list);
            if (result.code == 0) {
                mui.toast(result.msg);
                return false;
            }

            // console.log(index);
            phoneNumber=result.data.list[index].mobile;
            if (window.location.protocol === 'file:') {
                alert('由于安全原因，您必须使用http或https才能使用此功能。');
            } else {
                window.location.href = 'tel:' + phoneNumber;
                console.log('正在发起电话呼叫：'+ phoneNumber);
            }
        })();

    })
</script>